<template>
  <div class="item" v-if="item" @click="toDetail">
    <div class="left">
      <img :src="item.img" alt="" />
    </div>
    <div class="right">
      <div class="name">{{ item.n }}</div>
      <div class="score">
        {{ item.rate ? item.rate : "暂无评" }}<span>分</span>
      </div>
      <div class="user-info">
        <div class="img-box">
          <img :src="item.a.p" alt="" />
        </div>
        <div class="user-name">{{ item.a.n }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["item"],
  methods: {
    toDetail() {
      console.log(this.item);
      this.$router.push({
        name: "fooddetail",
        params: {
          foodid: this.item.id,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.item {
  width: 100%;
  height: 1.2rem;
  display: flex;
  margin-bottom: 0.15rem;
  .left {
    width: 1.7rem;
    min-width: 1.7rem;
    height: 1.2rem;
    border-radius: 0.1rem;
    overflow: hidden;
    margin-right: 0.1rem;
  }
  .right {
    flex-grow: 1;
    height: 100%;
    position: relative;
    color: var(--text-black);
    .name {
      font-size: 0.15rem;
    }
    .score {
      font-size: 0.12rem;
      margin: 0.08rem 0;
      > span {
        font-size: 0.13rem;
      }
    }
    .user-info {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      display: flex;
      align-items: center;
      .img-box {
        width: 0.18rem;
        height: 0.18rem;
        border-radius: 50%;
        overflow: hidden;
      }
      .user-name {
        margin-left: 0.1rem;
        font-size: 0.14rem;
        color: var(--text-gray);
      }
    }
  }
}
</style>